<template>
  <div class="orders-list-table">
<!--    <el-table :data="dataList" :max-height="heightStr" ref="multipleTable" @selection-change="onSelectionChange">-->
    <el-table :data="dataList" ref="multipleTable" @selection-change="onSelectionChange">
      <template v-for="{ type, prop, label, width, slot, align, fixed } in config">
        <el-table-column
            :key="prop"
            :label="label"
            :type="type"
            :min-width="width"
            :align="align"
            v-if="type"
        ></el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :fixed="fixed"
            :align="align"
            v-else-if="slot"
        >
          <template slot-scope="scope">
            <p v-if="slot === 'html'" v-html="scope.row.goodsNo + '<br>' + scope.row.categoryName"></p>
            <template v-if="slot === 'goods'">
              <!-- z-index 递减 上层 覆盖 下层 -->
              <div class="item" :style="{ zIndex: 100 - scope.$index }">
                <div v-if="scope.row.orderNo"><label class="tooltip" aria-label="点击复制"
                            @click="copyInfo(scope.row, 'all')">订单编号：{{ scope.row.orderNo }}</label>
                  <label class="relation-order">关联订单号：{{ scope.row.platformOrderNo?scope.row.platformOrderNo:'-' }}</label>
                  <!--  v-if="scope.row.platformOrderNo"  -->
                </div>
                 <div v-if="scope.row.afterNo"><label class="tooltip" aria-label="点击复制"
                            @click="copyInfo(scope.row, 'afterOrder')">售后编号：{{ scope.row.afterNo }}</label>
                </div>
                <div class="hint_pr" v-if="routeObj.name === 'ordersList'">
                  客户：{{scope.row.userName}}（{{scope.row.userPhone}}）
                </div>
                <div v-if="scope.row.applierName" class="hint_pr tooltip" aria-label="点击复制" @click="copyInfo(scope.row, 'service')">
                  跟进客服：{{ scope.row.applierName }}
                </div>
                <!--<div v-if="scope.row.submitDate" class="hint_pr">{{typeStr==='auditOrder'?'提交时间':'下单时间'}}：{{ scope.row.submitDate }}</div>-->
                <div v-if="scope.row.createdTime && isShowTime.createdTime" class="hint_pr">下单时间：{{ scope.row.createdTime }}</div>
                <div v-if="scope.row.submitDate && isShowTime.submitDate" class="hint_pr">提交审核时间：{{ scope.row.status == 99 ? '-' : scope.row.submitDate }}</div>
                <div class="hint_pr-operation">
                  <template v-if="typeStr === 'all' || typeStr === 'close'">
                    <label @click="toOtherPages(scope.row.subsetStatus == '99' && scope.row.applierName == userInfo.reallyName ? 'modify_order' : 'orderDetails', scope.row, 'modify_order')">查看/编辑</label>
                  </template>
                  <!-- 如果待提交的按钮，只有本人有-->
                  <template v-else-if="typeStr == 'submitted'">
                    <label v-if="scope.row.applierName == userInfo.reallyName">操作<i class="el-icon-arrow-down"></i></label>
                    <ul v-if="scope.row.applierName == userInfo.reallyName">
                      <li v-if="isShowCom.detail"><label @click="toOtherPages(scope.row.subsetStatus == '99' && scope.row.applierName == userInfo.reallyName ? 'modify_order' : 'orderDetails', scope.row, 'modify_order')">查看/编辑</label></li>
                      <li v-if="isShowCom.cancelOrder"><label @click="cancelOrderWait(scope.row)">取消订单</label></li>
                      <li v-if="isShowCom.cancelOrderMsg && scope.row.applierName == userInfo.reallyName && scope.row.subsetStatus == 3"><label @click="cancelOrderMsg(scope.row)">取消订单</label></li>
                      <li v-if="isShowCom.submitOrder"><label @click="onResubmitOrder(scope.row.orderId)">提交订单</label></li>
                      <li v-if="isShowCom.submitOrderAgain && scope.row.applierName == userInfo.reallyName && scope.row.approveStatus == 3"><label @click="onResubmitOrder(scope.row.orderId)">重新提交</label></li>
                      <li v-if="isShowCom.examineProcess"><label @click="onTableShowDialog('审核流程', '640px', 'shenheStep', scope.row, scope.$index)">审核流程</label></li>
                      <!-- <li v-if="isShowCom.examineProcess"><label @click="toOtherPages('orderDetails', scope.row, 'orderDetails')">查看/编辑</label></li>-->
                      <li v-if="isShowCom.seeExpress"><label @click="onTableShowDialog('查看物流', '500px', 'logisticsMessageOne', scope.row, scope.$index)">查看物流</label></li>
                      <li v-if="isShowCom.modifyExpress"><label @click="onTableShowDialog('修改快递单号', '500px', 'modifyOrderNoOne', scope.row, scope.$index)">修改快递单号</label></li>
                      <li v-if="isShowCom.confirmReceipt"><label @click="onConfirmReceipt(scope.row)">确认收货</label></li>
                      <li v-if="isShowCom.copyExpress"><label @click="copyInfo(scope.row, 'express')">复制物流单号</label></li>
                    </ul>
                  </template>
                  <!-- 审核订单列表操作按钮 -->
                  <template v-else-if="typeStr == 'auditOrder'">
                    <label>操作<i class="el-icon-arrow-down"></i></label>
                    <ul >
                      <li ><label @click="toOtherPages('orderDetails', scope.row, 'examination')">查看</label></li>
                      <li ><label @click="onTableShowDialog('审核流程', '640px', 'shenheStep', scope.row, scope.$index)">进度</label></li>
                      <li v-if="scope.row.approveStatus == 1 && scope.row.canDoApprove == 1"><label @click="onTableShowDialog('审核', '640px', 'shenheList', scope.row, false)">审核</label></li>
<!--                      <li v-if="scope.row.approveStatus == 1"><label @click="onTableShowDialog('审核', '640px', 'shenheList', scope.row, false)">{{scope.row.applierName}}审核{{userInfo.reallyName}}</label></li>-->
                    </ul>
                  </template>
                   <template v-else-if="typeStr == 'recordList'">
                    <label>操作<i class="el-icon-arrow-down"></i></label>
                    <ul >
                      <li >
                        <label @click="toOtherPages('afterSaleDetails', scope.row, 'Details')">查看</label>
                        </li>
                      <li v-if="scope.row.afterSaleStepCode == 1">
                        <label @click="onTableShowDialog('审核流程', '640px', 'shenheStep', scope.row, scope.$index)">进度</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 1&&scope.row.canDoApprove == 1">
                        <label @click="onTableShowDialog('审核', '640px', 'afterSaleShenhe', scope.row, scope.$index)">审核</label>
                      </li>
<!--                      <li v-if="scope.row.afterSaleStepCode!='6'&&scope.row.afterSaleStepCode!='7'&&scope.row.afterSaleStepCode!='8'&&(scope.row.createdUserName === userInfo.reallyName || userInfo.id === 1)">-->
                      <li v-if="parArrayArr.indexOf('chsh') != -1 && scope.row.afterSaleStepCode != 8 ">
                        <label @click="revocationAfterSales('撤回售后', '640px', 'cancelService', scope.row.afterNo)">撤回售后</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 3">
                        <label @click="onTableShowDialog('物流信息-退货', '640px', 'progress', scope.row, scope.$index)">查看退货物流</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 3&&(scope.row.createdUserName === userInfo.reallyName || userInfo.id === 1)">
                        <label @click="onTableShowDialog('修改退货单号', '500px', 'modifyOrderNoOneTui', scope.row, scope.$index)">修改退货单号</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 5&&parArrayArr.indexOf('after_xghhdh') != -1">
                        <label @click="onTableShowDialog('修改换货单号', '500px', 'modifyOrderNoTwo', scope.row, scope.$index)">修改换货单号</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 2&&(scope.row.createdUserName === userInfo.reallyName || userInfo.id === 1 )">
                        <label @click="onTableShowDialog('退货单号', '500px', 'modifyOrderNoOneTui', scope.row, scope.$index)">退货单号</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 4&&parArrayArr.indexOf('order_huanhuojichu') != -1">
                        <label @click="onTableShowDialog('换货寄出', '500px', 'modifyOrderNoTwo', scope.row, scope.$index)">换货寄出</label>
                      </li>
                      <li v-if="scope.row.afterSaleStepCode == 5">
                        <label @click="onTableShowDialog('物流信息-换货', '640px', '2', scope.row)">查看换货物流</label>
                      </li>
                      <li v-if="(scope.row.afterSaleStepCode == 3||scope.row.afterSaleStepCode == 5)&&((scope.row.createdUserName === userInfo.reallyName || userInfo.id === 1 )||parArrayArr.indexOf('main_confirmReceipt_wuliu') != -1)">
                        <label @click="onConfirmTake(scope.row)">确认收货</label>
                      </li>
                    </ul>
                  </template>
                  <!-- 售后订单操作按钮 -->
                  <template v-else-if="typeStr == 'afterOrder'">
                      <label @click="toOtherPages('afterSaleRecordList',scope.row,'afterOrder')">售后记录</label>
                  </template>
                  <template v-else>
                    <label>操作<i class="el-icon-arrow-down"></i></label>
                    <ul>
                      <li v-if="isShowCom.detail"><label
                          @click="toOtherPages(scope.row.subsetStatus == '99' && scope.row.applierName == userInfo.reallyName ? 'modify_order' : 'orderDetails', scope.row, 'modify_order')">查看/编辑</label>
                      </li>
                      <li v-if="isShowCom.cancelOrder"><label @click="cancelOrderWait(scope.row)">取消订单</label></li>
                      <li v-if="isShowCom.cancelOrderMsg && scope.row.applierName == userInfo.reallyName && scope.row.subsetStatus == 3"><label @click="cancelOrderMsg(scope.row)">取消订单</label></li>
                      <li v-if="isShowCom.submitOrder"><label @click="onResubmitOrder(scope.row.orderId)">提交订单</label></li>
                      <li v-if="isShowCom.submitOrderAgain && scope.row.applierName == userInfo.reallyName && scope.row.approveStatus == 3"><label @click="onResubmitOrder(scope.row.orderId)">重新提交</label></li>
                      <li v-if="isShowCom.examineProcess"><label @click="onTableShowDialog('审核流程', '640px', 'shenheStep', scope.row, scope.$index)">审核流程</label></li>
                      <!-- <li v-if="isShowCom.examineProcess"><label @click="toOtherPages('orderDetails', scope.row, 'orderDetails')">查看/编辑</label></li>-->
                      <li v-if="isShowCom.seeExpress"><label @click="onTableShowDialog('查看物流', '500px', 'logisticsMessageOne', scope.row, scope.$index)">查看物流</label></li>
                      <li v-if="isShowCom.modifyExpress"><label @click="onTableShowDialog('修改快递单号', '500px', 'modifyOrderNoOne', scope.row, scope.$index)">修改快递单号</label></li>
                      <li v-if="isShowCom.confirmReceipt"><label @click="onConfirmReceipt(scope.row)">确认收货</label></li>
                      <li v-if="isShowCom.copyExpress"><label @click="copyInfo(scope.row, 'express')">复制物流单号</label></li>
                    </ul>
                  </template>
                </div>
              </div>
              <div v-if="scope.row.details" >
                <div class="mesSty"   v-for="item,index in scope.row.details" :key="index">
                <!-- <img class="imgSty" src="https://dummyimage.com/72x54/FF6600" alt="">-->
                <el-image :src="item.goodsImage" fit="cover"></el-image>
                <div class="mesFont">
                  <p :title="item.goodsName+'*'+item.quantity"><span>{{ item.goodsName }}</span>
                  </p>
                  <p>{{ item.goodsSkuName }} * {{ item.quantity }}</p>
                </div>
              </div>
              </div>
              <div>
                 <div class="mesSty" v-if="!scope.row.details">
                <el-image :src="scope.row.goodsImage" fit="cover"></el-image>
                <div class="mesFont">
                  <p :title="scope.row.goodsName+'*'+scope.row.quantity"><span>{{ scope.row.goodsName }}</span>
                  </p>
                  <p>{{ scope.row.goodsSkuName }} * {{ scope.row.quantity }}</p>
                </div>
              </div>
              </div>

            </template>
            <template v-if="slot === 'contact'">
              <p>{{ scope.row.postName }}</p>
              <p>{{ scope.row.postContact }}</p>
            </template>
            <template v-if="slot === 'amount'">
              <p>总价：{{ scope.row.totalAmount }}</p>
              <p>已收：{{ scope.row.receivedAmount }}</p>
              <p>代收：{{ scope.row.collectionAmount }}</p>
            </template>
            <template v-if="slot === 'totalAmount'">
              <p>实付：￥{{scope.row.totalAmount}}</p>
              <p>退款：￥{{scope.row.refundAmount}}</p>
            </template>
             <template v-if="slot === 'shenheMessage'">
              <p>审核人：{{scope.row.approverName ? scope.row.approverName : '-'}}</p>
              <p>{{scope.row.approverTime ? scope.row.approverTime : '-'}}</p>
            </template>
             <template v-if="slot === 'notGo'">
              <p>{{scope.row.rejectReason ? scope.row.rejectReason : '-'}}</p>
            </template>
            <template v-if="slot === 'order'">
              <p :title="scope.row.subsetSatusLabel"><i v-bind:class="[{'danger-bg' : scope.row.status == 99},{'warning-bg' : scope.row.status == 3},'round']"></i>
                {{ scope.row.subsetSatusLabel }}</p>
            </template>
            <template v-if="slot === 'examine'">
              <p :title="scope.row.approveStatusLabel"><i v-bind:class="[{'danger-bg' : scope.row.approveStatus == 3},{'warning-bg' : scope.row.approveStatus == 1},{'round' : scope.row.approveStatus}]"></i>
                {{ scope.row.approveStatusLabel ? scope.row.approveStatusLabel : '-' }}</p>
            </template>
            <template v-if="slot === 'remarks'">
              <p>客服备注：{{ scope.row.remarks ? scope.row.remarks : '-' }}</p>
              <p>客户留言：{{ scope.row.userRemarks ? scope.row.userRemarks : '-' }}</p>
            </template>
            <template v-if="slot === 'operation'">
              <p>操作人：{{ scope.row.closedPersonName }}</p>
              <p>时间：{{ scope.row.closedTime }}</p>
            </template>
          </template>
        </el-table-column>
        <el-table-column
            :key="prop"
            :prop="prop"
            :label="label"
            :min-width="width"
            :align="align"
            v-else
        ></el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import mixinsCommon from '../mixins/common'
import mixinsOrderList from '../mixins/mixinsOrderList'

export default {
  name: 'OrdersListTable',
  mixins: [mixinsCommon, mixinsOrderList],
  props: {
    typeStr: {
      type: String,
      default: () => 'all'
    },
    heightStr: {
      type: String,
      default: () => '500px'
    },
    sortObj: { // 排序
      type: Object,
      default: () => {
      }
    },
    config: {
      type: Array,
      default: () => []
    },
    dataList: { // 数据列表
      type: Array,
      default: () => []
    },
    parArrayArr: { // 按钮权限
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      userInfo: {},
      operationActiveIndex: '1',
      popSty: false,
      isShowCom: {}, // 操作 按钮 组件显示 默认 全为 false
      isShowTime: {
        closedTime: false, // 关闭时间
        createdTime: false, // 下单时间
        finishedTime: false, // 审核时间
        submitDate: false // 提交审核时间
      },
      routeObj: {}
    }
  },
  watch: {
    config: {
      handler (newVal, oldVal) {
        console.log(newVal)
      },
      deep: true
    },
    dataList: {
      handler (newVal, oldVal) {
        // console.log(newVal)
        setTimeout(_ => {
          this.resetStyle() // 样式调整
        }, 100)
      },
      deep: true
    },
    typeStr (value) {
      // console.log(value)
      this.showCom() // 操作 按钮 组件显示
    },
    $route () {
      // this.testFun();
    }
  },
  mounted () {
    this.$nextTick(_ => {
      // this.resetDate()
      // console.log(this.config)
      this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      this.showCom() // 操作 按钮 组件显示
      this.onShowTime()
    })
  },
  created () {
    this.routeObj = this.$route
    console.log(this.routeObj)
    console.log(this.routeObj.name === 'logisticsOrderList')
  },
  methods: {

    resetStyle () {
      this.$nextTick(_ => {
        // 获取 所有行
        const elTableRowFirst = document.getElementsByClassName('el-table__row')
        elTableRowFirst.forEach((item, index) => {
          if (index === 0) {
            // 获取  第一行的第二个
            // return console.log(item)
            const elTableCell = item.getElementsByClassName('el-table__cell')[1]
            const elTableCell5 = item.getElementsByClassName('el-table__cell')[5]
            const elTableCelldivCell = elTableCell5.getElementsByClassName('cell')[0]

            const relationOrder = elTableCell.getElementsByClassName('relation-order')[0]
            // console.log(relationOrder, 'relationOrder')
            // console.log(elTableCelldivCell, 'elTableCell5')
            if (!relationOrder) {
              elTableCell.style.paddingTop = '45px'
              elTableCelldivCell.setAttribute('style', '')
              // console.log('没找到关联订单调整 ppadding-top')
            } else {
              elTableCell.setAttribute('style', '')
              elTableCelldivCell.style.marginTop = '30px'
            }
          } else {
            // 获取  其它行的第二个
            // return console.log(item)
            const elTableCell = item.getElementsByClassName('el-table__cell')[1]
            const relationOrder = elTableCell.getElementsByClassName('relation-order')[0]
            const mesSty = elTableCell.getElementsByClassName('mesSty')[0]
            if (relationOrder) {
              // console.log(mesSty)
              // mesSty.style.marginTop = '30px'
              // console.log('有找到关联订单', index)
              // elTableCell.style.paddingTop = '45px'
            } else {
              // console.log('没找到关联订单调整 ppadding-top')
              mesSty.setAttribute('style', '')
            }
          }
        })
      })
    },
    // 页面跳转
    toOtherPages (name, parameter, type) {
      // console.log(name, parameter, type)
      let query = { id: parameter, type }
      if (type === 'category') {
        query = { category: parameter, type }
      }
      if (type === 'modify_order') {
        query = { id: parameter.orderId, orderId: parameter.orderId, orderNo: parameter.orderNo, awaitSubmit: type }
      }
      if (type === 'orderDetails') {
        query = { id: parameter.orderId, orderId: parameter.orderId, orderNo: parameter.orderNo, type }
      }
      if (type === 'logistics') {
        query = { id: parameter.orderId, orderNo: parameter.orderNo, logistics: 'logistics1' }
      } // 物流
      if (type === 'afterSaleRecordList') {
        query = { orderNo: parameter.orderNo }
      }
      if (type === 'Details') {
        query = { afterNo: parameter.afterNo, orderId: parameter.orderId, id: parameter.id }
      }
      if (type === 'examination') {
        query = {
          id: parameter.id,
          orderNo: parameter.orderNo,
          approveStatus: parameter.approveStatus ? parameter.approveStatus : 1,
          audit: 'audit'
        }
      }// 审核
      if (type === 'afterOrder') { // 售后记录
        query = { orderNo: parameter.orderNo }
      }
      this.$router.push({ name, query })
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    showCom () { // 操作 按钮 组件显示
      this.isShowCom = { // 操作 按钮 组件显示 默认 全为 false
        detail: false, // 查看/编辑
        cancelOrder: false, // 取消订单
        cancelOrderMsg: false, // 取消订单 弹窗
        submitOrder: false, // 提交订单
        submitOrderAgain: false, // 重新提交
        examineProcess: false, // 审核流程
        seeExpress: false, // 查看物流
        modifyExpress: false, // 修改快递单号
        confirmReceipt: false, // 确认收货
        copyExpress: false // 复制物流单号
      }
      const type = this.typeStr
      const userInfo = this.userInfo
      // console.log(type)
      switch (type) {
        case 'submitted': // 待提交
          this.isShowCom.detail = true // 查看/编辑
          this.isShowCom.cancelOrder = true // 取消订单
          this.isShowCom.submitOrder = true // 提交订单
          break
        case 'examine': // 审核订单
          this.isShowCom.detail = true // 查看/编辑
          this.isShowCom.examineProcess = true // 审核流程
          // 本人 + 状态
          // scope.row.applierName == userInfo.reallyName && scope.row.approveStatus == 3
          this.isShowCom.submitOrderAgain = true // 重新提交
          break
        case 'beforeShipment': // 发货前
          this.isShowCom.detail = true // 查看/编辑
          // scope.row.applierName == userInfo.reallyName && scope.row.subsetStatus == 3
          this.isShowCom.cancelOrderMsg = true // 取消订单 弹窗
          break
        case 'waitSignFor': // 待签收
          this.isShowCom.detail = true // 查看/编辑
          this.isShowCom.seeExpress = true // 查看物流
          this.isShowCom.modifyExpress = true // 修改快递单号
          this.isShowCom.confirmReceipt = true // 确认收货
          this.isShowCom.copyExpress = true // 复制物流单号
          break
        case 'finish': // 已完成
          this.isShowCom.detail = true // 查看/编辑
          this.isShowCom.copyExpress = true // 复制物流单号
          break
        case 'close': // 已关闭
          this.isShowCom.detail = true // 查看/编辑
          break
        default: // 默认
          console.log('组件显示,没有类型,默认为首页配置！')
      }
    },
    onShowTime () {
      const routeName = this.$route.name
      switch (routeName) {
        case 'ordersList': // 客服订单
          this.isShowTime.createdTime = true // 下单时间
          this.isShowTime.submitDate = true // 提交审核时间
          break
        case 'examinationOrderList': // 审核订单
          this.isShowTime.submitDate = true // 提交审核时间
          break
        case 'afterSaleOrdeList': // 售后订单
          this.isShowTime.createdTime = true // 下单时间
          this.isShowTime.submitDate = true // 提交审核时间
          break
        case 'afterSaleRecordList': // 售后记录
          break
        default:
          this.isShowTime.createdTime = true // 下单时间
          this.isShowTime.finishedTime = true // 审核时间
          // console.log('%c默认值！👀', 'color:#fff;font-size:1.2rem;padding:0.8rem 1.6rem;border-radius: 5px;background-color: #3eaf7c;font-family: "Microsoft YaHei",Arial,sans-serif;')
      }
      console.log(routeName, this.isShowTime)
    },
    onTableShowDialog (title, width, type, data, batch) { // 输出 抛出 内容值 显示 dialog
      const dialogObj = { title, width, type, data, batch }
      console.log(dialogObj)
      this.$emit('onTableShowDialogCom', dialogObj)
    },
    revocationAfterSales (title, width, type, afterNo) {
      const dialogObj = { title, width, type, afterNo }
      console.log(dialogObj)
      this.$emit('onRevocationAfterSales', dialogObj)
    },
    cancelOrderMsg (row) { // 取消订单 弹窗
      this.$emit('outTableCancelOrderMsg', row)
    },
    onConfirmTake (row) {
      this.$emit('onConfirmTakeChange', row)
    },
    onSelectionChange (val) { // 多选
      // this.multipleSelection = val;
      // console.log(val)
      this.$emit('tableSelectionChange', val)
    }
  }
}
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.tooltip {
  position: relative;
  /*margin: 50px auto;*/
  /*border: 1px solid;*/
  cursor: pointer;
}

.tooltip[aria-label]:hover:after {
  content: attr(aria-label);
  position: absolute;
  bottom: -38px;
  left: 30%;
  /*border: 1px solid;*/
  width: 80px;
  text-align: center;
  border-radius: 3px;
  padding: 5px;
  color: #ffffff;
  font-size: 12px !important;
  background-color: rgba(0, 0, 0, 0.5);
}

.mesSty:after {
  clear: both;
  display: table;
  content: '';
}

/*圆点*/
.round {
  width: 10px;
  height: 10px;
  border-radius: 50px;
  background-color: #0b7df3;
  display: inline-block;
}

.primary-bg {background-color: #409eff !important;}
.success-bg {background-color: #67c23a !important;}
.warning-bg {background-color: #e6a23c !important;}
.danger-bg {background-color: #f56c6c !important;}
.info-bg {background-color: #909399 !important;}

.el-table{
  overflow: unset;
}

::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background-color: #ffffff;
}

::v-deep.el-table th.el-table__cell {
  background-color: #F8F8F8;
}

::v-deep.el-table th.el-table__cell .cell {
  color: #333333;
  font-size: 14px;
}

/deep/ .el-table tr {
  position: relative;
  width: 100%;
}
/deep/ .el-table .el-table__body-wrapper{
  /*padding-top: 40px;*/
  overflow: unset;
}
::v-deep.el-table .el-table__body .el-table__row {
  position: relative!important;
}
::v-deep.el-table .el-table__body .el-table__row:first-child {
  /*background-color: #2D7EDF;*/
}
::v-deep.el-table .el-table__body .el-table__row td:first-child .cell {
  position: absolute;
  top: -8px;
  left: 0;
  z-index: 10000;
}
::v-deep.el-table .el-table__body .el-table__row:first-child td:first-child .cell {
  top: 3px;
}
::v-deep.orders-list-table .el-table .el-table__body .el-table__row .el-table__cell:nth-child(2) {
  position: static!important;
  /*padding: 5px 0;*/
}
::v-deep.orders-list-table .el-table .el-table__body .el-table__row .el-table__cell:nth-child(1) {
  /*position:relative!important;*/
  }
::v-deep.orders-list-table .el-table .el-table__body .el-table__row .el-table__cell{
  /*background-color: #0b7df3;*/
  padding-top: 30px;
  /*padding-bottom: 15px;*/
}
::v-deep.orders-list-table .el-table .el-table__body .el-table__row:first-child .el-table__cell:nth-child(2) {
  /*background-color: #0b7df3;*/
  padding-top: 50px;
  /*padding-bottom: 15px;*/
}
::v-deep.orders-list-table .el-table .el-table__body .el-table__row .el-table__cell:nth-child(2) {
  /*background-color: #0b7df3;*/
  padding-top: 30px;
  /*padding-bottom: 15px;*/
}
::v-deep.orders-list-table .el-table .el-table__row:first-child .el-table__cell:nth-child(2) .item{
  /*background-color: #0b7df3;*/
  margin-top: 0;
}
::v-deep.orders-list-table .el-table .el-table__cell:nth-child(2) .item{
  /*background-color: #0b7df3;*/
  margin-top: -44px;
}
.item {
  width: 100%;
  height:40px;
  background-color: #EBEEF5;
  padding: 7px 0 7px 50px;
  position: absolute;
  /*top: 0;*/
  left: 0;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}
::v-deep.el-table .el-table__body .el-table__row:first-child td:nth-child(2) .item{
  top: 0;
  /*background-color: rgba(0,0,0,0.3);*/
}
.item > div {
  float: left;
}

.item div:first-child label:first-child {
  font-size: 14px;
  color: #4168E7;
  line-height: 10px;
  display: block;
}

.item div:first-child label:nth-child(2) {
  font-size: 12px;
  font-weight: 400;
  color: #666666;
}

.hint_pr {
  padding-left: 8vh;
  // line-height: 20px;
}

.hint_pr-operation {
  margin-right: 20px;
  float: right !important;
  position: relative;
  z-index: 10;
}

.hint_pr-operation label {
  cursor: pointer;
}

.hint_pr-operation ul {
  display: none;
  position: absolute;
  right: -14px;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  padding: 10px;
  z-index: 1000;
  cursor: pointer;
}

.hint_pr-operation:hover ul {
  display: block;
  border-radius: 3px;
}

.hint_pr-operation ul li {
  text-align: center;
  line-height: 30px;
  border-bottom: 1px solid #e9e9e9;
  cursor: pointer;
}

.hint_pr-operation ul li:last-child {
  border-bottom: none;
}

.imgSty {
  width: 80px;
  display: block;
}

.mesSty {
  /*display: flex;*/
  /*align-items: center;*/
  margin-bottom: 8px;
}

.mesSty .el-image {
  width: 72px;
  height: 54px;
  float: left;
}

.mesSty .mesFont {
  float: left;
  width: calc(100% - 100px);
  //text-align: center;
}

.mesSty .mesFont p {
  margin-block-start: 0;
  margin-block-end: 0;
  margin-left: 5px;
  color: #333333;
  /*font-size: 12px;*/
  line-height: 27px;
}

.mesSty .mesFont p:nth-child(2) {
  color: #999999;
  font-size: 12px;
}

.mesSty .mesFont p:nth-child(2) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.iconSty {
  float: right;
  cursor: pointer;
}

@media (min-width: 1500px) {

}
@media screen and (max-width: 1500px) {
  .item div:first-child label:first-child {
  font-size: 14px;
  color: #4168E7;
  line-height:20px ;
  display: block;
}
  .item {
  width: 100%;
  height:40px;
  background-color: #EBEEF5;
  padding: 0px 0 7px 50px;
  position: absolute;
  /*top: 0;*/
  left: 0;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
}
  .hint_pr {
  padding-left: 8vh;
  line-height: 20px;
}
  ::v-deep.el-table .el-table__body .el-table__row td:first-child .cell {
    /*top: -32px;*/
  }
}
@media screen and (max-width: 1200px) {
  ::v-deep.el-table .el-table__body .el-table__row td:first-child .cell {
    /*top: -25px;*/
  }
}
@media (min-width: 768px) {

}
</style>
